<html>
    
    <head>
        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
        <script language="javascript">		
			var background = chrome.extension.getBackgroundPage(); 					
			
            $("#container").ready(function() {
				if (background.getHightlightTM() == 1)
				{
				$('#checkbox').attr('checked', true);
				$('#config').show();
				}
				else 
				{
				$('#checkbox').attr('checked', false);
				$('#config').hide();
				}
			
				if (background.getEventTypeTM()==undefined)
					background.setEventTypeTM('music');
				$('#eventType').val(background.getEventTypeTM()); 				
				
            });
				
			
			function saveData()
			{
				background.setEventTypeTM($('#eventType').val());
				background.resetRSS();
				background.reloadDisplay();
				background.broadcastState();	
				$("#saved").fadeIn();							
				setTimeout(function() { $('#saved').fadeOut(); }, 1000);
			}	

			function resetData()
			{
				background.setEventTypeTM('music');
				$('#eventType').val(background.getEventTypeTM()); 				
				background.respRSS == undefined;
				background.reloadDisplay();
				background.broadcastState();	
				$("#saved").fadeIn();							
				setTimeout(function() { $('#saved').fadeOut(); }, 1000);
			}	
			
			function showValue()
			{
				if ($("#checkbox").is(':checked') == true) 
				{
					$('#config').show();				
					background.setHightlightTM(1);
				}
				else 
				{
					$('#config').hide();				
					background.setHightlightTM(0);
				}		
				background.reloadDisplay();
				background.broadcastState();				
			}
			
			
			</script>
		<style>
			body {margin: 0; padding: 0;}
			.wrapper {width: 180px; overflow: hidden;}
			h1 {background: url(img/fondo-h1.gif); height: 40px; margin: 0; padding: 10px 0 0 0;}
			h1 img {display: block; margin: 0 0 0 11px;}
			div.checkbox {border-bottom: 1px solid #cccccc; font: 11px Verdana, Geneva, sans-serif; padding: 9px 5px 3px 0; color: #666; margin: 0 7px 10px 11px; }
			div.checkbox input {vertical-align: middle; padding: 0; margin: -1px 0 0 0;}

			div.contenidos {overflow: hidden; background: url(img/fondo-bottom.gif) left bottom repeat-x; margin: 0 4px;}
			div.contenidos .izq {background: url(img/fondo-bottom-izq.gif) left bottom no-repeat;}
			div.contenidos .dch {background: url(img/fondo-bottom-dch.gif) right bottom no-repeat;padding-bottom: 10px;}

			div.bloque {font: 11px Verdana, Geneva, sans-serif;  margin: 10px 7px 0 7px; clear: both; overflow: hidden; min-width: 400px;}
			div.bloque img {display: block; float: left;}
			div.bloque p {float: left; padding: 0 8px; margin: 0; width: 300px;}
			div.bloque a.titular {font: bold 13px Georgia, "Times New Roman", Times, serif; display: block; color: #000; text-decoration: none;}
			div.bloque a.titular:hover {text-decoration: underline;}
			div.bloque span {font-size: 10px; color: #999; display: block; margin-bottom: 8px;}
		</style>
    </head>
    
    <body>
    <div class="wrapper	">
		<h1>
			<img src="img/logo-ticket.gif" alt="Ticketmaster" />
		</h1>
		<div class="checkbox" id="container">
			<input type="checkbox" id="checkbox" onclick="showValue()"/>
			<label for="checkbox">
				Highlight terms
			</label>
			<br /><br />
			<div id="config" style="display:none">
			See Events By:
			<select id="eventType">
			<option value="music">Music</option>
			<option value="sports">Sports</option>			
			<option value="arts">Arts & Theatre</option>
			<option value="family">Family & Attractions</option>
			<option value="miscellaneous">Miscellaneous</option>
			</select>
			<br/><br/>
			<input type="button" id="saveData" value="Save" onclick="saveData()"/>
			<input type="button" id="resetData" value="Reset" onclick="resetData()"/>
			<div id="saved" style="display:none">Data Saved</div>
			<br/><br/>
			</div>
		</div>
	</div>
		<script type="text/javascript">
		var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
		document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
		</script>
		<script type="text/javascript">
		try {
		var pageTracker = _gat._getTracker("UA-12671877-1");
		pageTracker._trackPageview();
		} catch(err) {}
		</script>
    </body>

</html>